 <template>
  <div slot="book">
    <a-card
                  :title="book.title"
                  :isbn="book.isbn"
                  :marcid="book.bookid"
                  :headStyle="headStyles"
                  style="width: 100%"
                >
                <a :href="book.url" target="_blank" class="bookurl"></a>
                  <a-row
                    :gutter="16"
                    type="flex"
                    justify="space-around"
                    align="middle"
                  >
                  
                    <a-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1"> </a-col>

                    <a-col :xs="24" :sm="24" :md="13" :lg="23" :xl="24">
                      <a-row>
                        <blockquote>
                          <p v-html="book.content" style="color: #333"></p>
                        </blockquote>
                      </a-row>
                    </a-col>
                  </a-row>
                </a-card>
    <!-- <a-card
      :title="title"
      :isbn="isbn"
      :marcid="bookid"
      :headStyle="headStyles"
      style="width: 100%"
    >
             

      <a-row
        :gutter="16"
        type="flex"
        justify="space-around"
        align="middle"
      >

        <a-col
          :xs="23"
          :sm="23"
          :md="8"
          :lg="6"
          :xl="4"
          v-if="getclassname != 'Unified'"
           @click="godetail(id,title)"
        >

          <img
            align="center"
            :src="cover"
            width="150px"
            style="margin: 0 auto;display:block"
          />

        </a-col>
        <a-col
          :xs="1"
          :sm="1"
          :md="1"
          :lg="1"
          :xl="1"
        >

        </a-col>

        <a-col
          :xs="24"
          :sm="24"
          :md="13"
          :lg="15"
          :xl="getclassname == 'Unified' ? 24 :19 "
        >
          <a-row v-show="getclassname == 'Paperbook' || getclassname == 'ebook'">
            <blockquote>
              <p
                class="list-group-item-text text-muted"
                name="author"
              >作者:{{this.author}}&nbsp;&nbsp;/&nbsp;&nbsp;出版日期:{{this.publish_date}}&nbsp;&nbsp;/&nbsp;&nbsp;提供商:{{this.src}}</p>
              <p
                class="list-group-item-text text-muted"
                name="isbn"
                :value="isbn"
              >ISBN:{{this.bisbn}}&nbsp;&nbsp;/&nbsp;&nbsp;分类:{{this.cates}}&nbsp;&nbsp;/&nbsp;&nbsp;格式:{{this.filetype}}</p>
            </blockquote>
          </a-row>
           <a-row v-show="getclassname == 'Unified'">
            <blockquote>
              <p style="color:#333">{{content}}</p>
            </blockquote>
          </a-row>
          <a-row v-show="getclassname == 'qikan'">
            <blockquote>
            </blockquote>
          </a-row>
          <a-row data-id="intro" v-if="intro && getclassname == 'ebook'">
            <p>{{intro}}</p>
          </a-row>
          <a-row v-if="getclassname != 'Unified'">
            <a-divider dashed />
          </a-row>
          <a-row v-if="getclassname == 'Paperbook'">
            <a-button-group>
              <a-button
                type="dash"
                @click="EmitGetBookInfo(bookid,title)"
              >
                纸书{{ebooklist.length}}
              </a-button>
              <div v-if="ebooklist.length > 0">
               
                <a-button v-for="(item,index) in ebooklist" :key="index" style="margin:0 5px"
                  type="danger"
                >
                  <a :href="item.link" target="_blank">本馆电子书</a> 
                  </a-button>
              </div>
            
            </a-button-group>
          </a-row>
          <a-row v-if="getclassname == 'ebook'">
            <a-col
            :xs="24"
            :sm="24"
            :md="13"
            :lg="24"
            style="display:flex"
            >
               <a :href="read" target="_blank" class="btn-successread">电子书点此阅读</a>
               <div v-if="ebooklist" style="display:contents">
                  <a  v-for="(item,index) in ebooklist" :key="index" :href="item.link" target="_blank" class="btn-successread" style="margin:0 5px">本馆纸书</a>
               </div>
            </a-col>
           
          </a-row>
        </a-col>

      </a-row>
      <div>
        <a-collapse :bordered="false" :showArrow="false">
          <template #expandIcon="props">
            <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
          </template>
          <a-collapse-panel key="1" header="目录《点此展开收起》" :style="customStyle" :showArrow="false">
             <a-list item-layout="horizontal" v-for="(item,index) in muluText" :key="index">
                <template>
                  <a-list-item>
                        <a href="https://www.antdv.com/">{{index+1}}.{{ item.name }}</a>
                      
                  </a-list-item>
                </template>
                  <a-list item-layout="horizontal" v-for="(items,indexs) in item.sublevels" :key="indexs">
                    <template>
                      <a-list-item>
                            <a href="https://www.antdv.com/">-- <span style="margin-left:10px">{{index+1}}.{{indexs+1}}{{ items.name }}</span></a>
                      </a-list-item>
                    </template>
                  </a-list>
              </a-list>
          </a-collapse-panel>
        </a-collapse>
      </div>
    </a-card> -->
  </div>
</template>

<script>
// import axios from "axios";
// import VueAxios from "vue-axios";
export default {
  props: {
    book: Object,
    id: Number,
    title: String,
    author: String,
    publisher: String,
    publish_date: String,
    pub_year: Number,
    cover: String,
    intro: String,
    isbn: String,
    bisbn: String,
    category: String,
    cates: String,
    booktype: String,
    filetype: String,
    bookid: String,
    assertId: String,
    src: String,
    view_count: Number,
    extid: String,
    ext: String,
    created_at: Number,
    updated_at: Number,
    pc_read: String,
    pc_epub: String,
    wx_read: String,
    wx_epub: String,
    read:String,
    detail: String,
    content:String,
    ebooklist:Array
  },
  data: () => ({
    is_bookinfo_visible: false,
    is_spinning: false,
    header: {},
    body: {},
    info: [],
    headStyles:{
      color:'#2780e3',
      background:'#f5f5f5'
    },
    customStyle:
        'color:#2780e3',
  }),
  watch: {
  },
  computed:{
    getclassname() {
      return this.$store.state.Namedparent.name;
    },
  },
  methods: {
    godetail(id,title){
      this.$store.commit(this.$store.state.Namedparent.name+'/SHOW_DETAIL',true)
      var paras = {
            id:id,
            searchtitle:title,
            type:this.$store.state.Namedparent.name
      }
       this.$store.commit(this.$store.state.Namedparent.name+'/ChangeDetailQuery',paras)
        this.$router.push({
          path: '/detail',
          query: { 
            searchtitle:title,
            id:id,
            type:this.$store.state.Namedparent.name
            
         },
        // params: { id: JSON.stringify(this.$store.rs) },
      });
    },
    showDrawer() {
      this.is_bookinfo_visible = true;
      this.$emit("showbookid", true, this.bookid, this.title);
      this.$store.commit("BOOKINFO_ALREADY_SHOW", true);
    },
    onDrawerClose() {
      this.is_bookinfo_visible = false;
      this.$emit("showbookid", false);
      this.$store.commit("BOOKINFO_ALREADY_SHOW", false);
    },
    EmitGetBookInfo(marc_no, title) {
      this.$emit("showbookid", false, marc_no, title);
      this.$store.commit("BOOKINFO_ALREADY_SHOW", false);
    },
  },
  mounted() {
    if(this.$route.name == 'detail'){
      this.$store.commit(this.$store.state.Namedparent.name+'/SHOW_DETAIL',true)
    }else{
      this.$store.commit(this.$store.state.Namedparent.name+'/SHOW_DETAIL',false)
    }
    // this.$store.commit(this.$store.state.Namedparent.name+'/SHOW_DETAIL',true)
     
    // console.log(this.muluText)
   // var marc_no = this.$route.params.id;

   // console.log(" %c htis marc_no: ", "color:brown;", marc_no);
    // if (marc_no == this.bookid) {
    // if (!this.is_bookinfo_visible) {
    // this.is_bookinfo_visible = true;
    // this.GetBookInfo(marc_no);
    // this.$emit("ShowBookid", marc_no);
    // }
    // }
  },
};
</script>

<style scoped>
  /deep/.ant-collapse-header{
    color: blueviolet !important;
  }
  .text-muted{
    font-size: 15px;
  }
  .text-muted p{
    border-bottom: 1px dashed #EFEFEF;
    line-height: 2;
  }
  .text-muteds{
    text-align: center;
    margin: 5px auto;
  }
   .text-muteds p{
    margin: 0;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
  }
.btn-success {
    color: #ffffff;
    background-color: #3fb618;
    border-color: #3fb618;
    text-align: center;
    border: 1px solid transparent;
    padding: 10px 10px;
    font-size: 15px;
}
.btn-successread{
    
    display: inline;
    color: #ffffff;
    background-color: #3fb618;
    border-color: #3fb618;
    text-align: center;
    border: 1px solid transparent;
    padding: 10px 10px;
    font-size: 15px;
}
.btn-successread:hover{
  background: #25690f;
}
.bookurl{
  width: 100%;
    display: block;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
}
</style>
